<template>
	<div class="aside-inner">
		<ul class="nav-menu" v-if="show1" id="navf">
			<li class="actived index">
				<router-link to="/index" class="era"><i class="icon iconfont icon-homepage"></i><span>首页</span></router-link>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="erji">
					<li class="lis">
						<router-link to="/Operator">操作员</router-link>
					</li>
					<!--<li class="lis">
						<router-link to="/">日志管理</router-link>
					</li>-->
					<li class="lis">
						<router-link to="/sys">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-jichuguanli"></i><span>基础管理</span></a>
				<ul class="erji">
					<!--<li class="lis">
						<router-link to="/">词典管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/">业务员</router-link>
					</li>-->
					<li class="lis">
						<router-link to="/project">项目管理</router-link>
					</li>
					<!--<li class="lis">
						<router-link to="/">自定义管理</router-link>
					</li>-->
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-kanshu03-copy"></i><span>业务管理</span></a>
				<ul class="erji">
					<!--<li class="lis">
						<router-link to="/">客户管理</router-link>
					</li>-->
				</ul>
			</li>
		</ul>
		<ul class="nav-menu1" v-else="">
			<li class="actived index">
				<router-link to="/index" class="era"><i class="icon iconfont icon-homepage"></i><span>首页</span></router-link>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/Operator">操作员</router-link>
					</li>
					<li>
						<router-link to="/">日志管理</router-link>
					</li>
					<li>
						<router-link to="/">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-jichuguanli"></i><span>基础管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/">词典管理</router-link>
					</li>
					<li>
						<router-link to="/">业务员</router-link>
					</li>
					<li>
						<router-link to="/">项目管理</router-link>
					</li>
					<li>
						<router-link to="/">自定义管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-kanshu03-copy"></i><span>业务管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/">客户管理</router-link>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	import emitt from './emit'
	export default {
		name: "sideBar",
		data(){
			return{
				show1:true,
			}
		},
		mounted: function() {
			var me = this
			emitt.$on("toggle", function(isshow) {
				me.hide = isshow;
				me.show1 = !isshow;
			})
			this.$nextTick(function() {
				$(".nav-menu>li").click(function() {
					$(this).addClass("actived").siblings().removeClass("actived")
				})
				$(".index").click(function() {
					$(".erji").hide(300)
				})
				$(".erji").hide()
				$("#navf>li").on('click', function() {
					var that = $(this)
					$(this).children(".erji").toggle(200).addClass("animated slideInLeft").parent().siblings().children("ul").hide(300)
					setTimeout(function() {
						that.children(".erji").removeClass("slideInLeft animated")
					}, 1000);
				})
				$(".nav-menu>li>ul").click(function() {
					event.stopPropagation();
				})
				$(".lis").click(function() {
					$(".lis").removeClass("erli")
					$(this).addClass("erli")
				})
			})
		},
	}
</script>

<style>
	.aside-inner{
		position: fixed;
		height: 100%;
		left: 0;
		top: 60px;
		z-index: 99999;
	}
	.nav-menu {
		height: 100%;
		background-color: #3a3f51;
		width: 200px;
		color: #fff;
		transition: all 0.3s;
	}
	
	.nav-menu li.actived {
		border-left-color: #9289ca;
	}
	
	.nav-menu li {
		border-left: 3px solid transparent;
		-webkit-transition: border-left-color 0.2s ease;
		-o-transition: border-left-color 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.nav-menu>li {
		position: relative;
		transition: all 0.3s;
	}
	
	.nav-menu a {
		color: #e1e2e3;
		padding: 12px 24px;
		letter-spacing: .025em;
		font-weight: normal;
		cursor: pointer;
		display: block;
		text-decoration: none;
		transition: all 0.3s;
	}
	
	.nav-menu i {
		width: 24px;
		display: inline-block;
		transition: all 0.3s;
	}
	
	.erji li a {
		padding-left: 45px;
		transition: all 0.3s;
	}
	
	.actived .era {
		color: #9289ca;
	}
	
	.nav-menu a:hover {
		color: #9289ca;
	}
	
	.erli a {
		color: #9289ca;
	}
	
	.nav-menu span {
		padding-left: 10px;
	}
	
	.nav-menu1 {
		height: 100%;
		background-color: #3a3f51;
		width: 70px;
		color: #fff;
		transition: all 0.3s;
	}
	
	.nav-menu1 span {
		display: none;
		transition: all 0.3s;
	}
	
	.nav-menu1 li.actived {
		border-left-color: #9289ca;
	}
	
	.nav-menu1>li {
		border-left: 3px solid transparent;
		-webkit-transition: border-left-color 0.2s ease;
		-o-transition: border-left-color 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.nav-menu1>li {
		position: relative;
	}
	
	.nav-menu1 a {
		color: #e1e2e3;
		padding: 20px 20px;
		letter-spacing: .025em;
		font-weight: normal;
		cursor: pointer;
		display: block;
		text-decoration: none;
		transition: all 0.3s;
	}
	
	.nav-menu1 a i {
		font-size: 28px !important;
	}
	
	.nav-menu1>li>.erji1 {
		width: 200px;
		background: #3a3f51;
		position: absolute;
		display: none;
		top: 0;
		left: 67px;
		z-index: 99;
		transition: all 0.3s;
	}
	
	.nav-menu1>li:hover .erji1 {
		display: block !important;
	}
	
	@keyframes slideInLeft {
		from {
			transform: translate3d(-100%, 0, 0);
			visibility: visible;
		}
		to {
			transform: translate3d(0, 0, 0);
		}
	}
	
	.slideInLeft {
		animation-name: slideInLeft;
	}
	
	.animated {
		animation-duration: 1s;
		animation-fill-mode: both;
	}
	
	.animated.infinite {
		animation-iteration-count: infinite;
	}
	.router-link-active{
		color: #9289ca;
	}
</style>